<template>
    <div>
        <el-dialog
            :title="$t('alarmpush.editAlarmType.title')"
            :visible="visibleEdit"
            class="el-dialog-lg"
            @close="()=>{$store.commit('setVisibleEdit',false)}">
            <el-form ref="form" :model="form" label-width="200px" >
                <el-row :gutter="24">
                    <el-col :span="11">
                        <el-form-item :label="$t('equipmentType')" prop="deviceTypeName">
                            <el-select v-model="form.deviceType" filterable :placeholder="$t('pleaseSelect')" disabled>
                                <el-option
                                v-for="item in deviceTypeData"
                                :key="item.value"
                                :label="item.code"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('alarmpush.alarmCode')" prop="alarmCode" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input-number v-model="form.alarmCode" controls-position="right"></el-input-number>
                        </el-form-item>
                        <el-form-item :label="$t('alarmpush.alarmName')" prop="alarmName" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input v-model="form.alarmName" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('alarmpush.alarmType')" prop="alarmType" :rules="[{ required: true, message: $t('index_js_notNull')}]" >
                            <el-select v-model="form.alarmType" filterable :placeholder="$t('pleaseSelect')">
                                <el-option
                                v-for="item in alarmTypeData"
                                :key="item.value"
                                :label="item.code"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('alarmpush.alarmLevel')" prop="alarmType" :rules="[{ required: true, message: $t('index_js_notNull')}]" >
                            <el-select v-model="form.alarmLevel" filterable :placeholder="$t('pleaseSelect')">
                                <el-option
                                v-for="item in alarmLevelData"
                                :key="item.value"
                                :label="item.code"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('alarmpush.remark')" prop="remark">
                            <el-input v-model="form.remark" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item :label="$t('alarmpush.alarmReason')" prop="reason">
                            <el-input v-model="form.reason" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('alarmpush.condition')" prop="tiggerCondition">
                            <el-input v-model="form.tiggerCondition" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('alarmpush.recover')" prop="recoverCondition">
                            <el-input v-model="form.recoverCondition" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('alarmpush.userSuggestion')" prop="userSuggestion">
                            <el-input v-model="form.userSuggestion" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('alarmpush.afterSalesSuggestion')" prop="saleSuggestion">
                            <el-input v-model="form.saleSuggestion" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setVisibleEdit',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('save')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: {
        deviceTypeData:'',
        alarmTypeData:'',
        alarmLevelData:'',
        rowData:''
    },
    data() {
        return {
            form:{
                id:'',
                deviceType:'',
                alarmCode:'',
                alarmName:'',
                alarmType:'',
                alarmLevel:'',
                remark:'',
                reason:'',
                tiggerCondition:'',
                recoverCondition:'',
                userSuggestion:'',
                saleSuggestion:''
            }
        };
    },
    computed: {
        visibleEdit(){
            return this.$store.state.sysStore.visibleEdit
        }
    },
    watch:{
        rowData:{
            async handler(nv,ov){
                let data=nv||ov
                for(let key in this.form){
                    if(key=='alarmType'||key=='alarmLevel'||key=='deviceType'){
                        this.form[key]=data[key].toString();
                    }else{
                        this.form[key]=data[key];
                    }

                }
                this.form.id=data.ids
            }
        }
    },
    mounted(){

    },
    methods: {
        save(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.commitForm()
              } else {
                console.log('error submit!!');
                return false;
              }
            });
        },
        async commitForm(){
            let res = await this.API.editAlarmDefine(this.form)
            if(res.success){
                this.$message.success(this.$t('index.control_success'));
            }else{
                this.$message.error(this.$t('index.control_fail'));
            }
            this.$store.commit('setVisibleEdit',false)
            this.$emit('uploadPage',true)
        }
    }
};
</script>

<style lang="less">
.el-input-number.is-controls-right .el-input__inner{
    text-align: left;
}
</style>
